1-2 閬　G`ヶ

基本而言，我們可有兩種方式來使用 JavaScript 於網頁之中：
  1. 循序執行（Sequential Execution）: 瀏覽器讀入網頁後，即載入並執行 JavaScript 程式碼，最後將結果直接呈現在瀏覽器上。
  2. 事件驅動（Event Driven）: 瀏覽器讀入網頁後，即載入 JavaScript 程式碼，但必須等到使用者點選連結或影像，或是啟動其他滑鼠事件（例如當滑鼠離開某個影像），才能觸發 JavaScript 的執行。
本節將先介紹「循序執行」的 JavaScript 程式碼，並以最簡單的範例來帶領讀者進入 JavaScript 的世界。至於「事件驅動」的 JavaScript 程式碼設計，將會在下一節說明。

若要在 HTML 原始碼中加入 JavaScript 的程式碼，只要使用 <script> 標籤即可，其基本格式如下：

<script language=javascript> JavaScript 程式碼 ... </script> 在上述基本格式中，標籤中的大小寫並無任何影響（因此「script」可寫成「SCRIPT」，「language」可寫成「LANGUAGE」。）。此外，JavaScript/JScript 即是 <script> 標籤的預設語言，因此「language=javascript」或「language=jscript」也可以完全省略。（若你使用的語言是 VBScript 或 PerlScript，則一定要加上 language=VBScript 或 language=PerlScript。）

Hint
雖然 HTML 內的 JavaScript 標籤是可以不分大小寫，但是標籤內部的 JavaScript 程式碼本身會區分大小寫，這是要特別注意的地方！

首先我們來看一個循序執行的簡單範例，此範例會在網頁上印出「Hello World!」，如下：

Example（hello01.htm）：

上述範例的原始檔如下：

原始檔（hello01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>利用 JavaScript 來印出 "Hello World!"</h2>
<hr>

<script language="javascript">
	str = "Hello World!";
	document.write(str);
</script>

<hr>
</body>
</html>

其中 str 是一個字串變數，其值為 "Hello World!"，document 則是一個物件，代表程式碼所在的文件，write 則是 document 的一個方法，可將一個字串印出於瀏覽器，因此 document.write(str) 的作用就是將 "Hello World!" 顯示在瀏覽器之上。

我們在前一小節提過，JavaScript 是一個以物件為基礎的語言，因此幾乎所有的變數在 JavaScript 中都是一個物件，一個物件通常有一些性質（Property）和方法（Method），而與物件相關的函數通常就被定義成物件的方法（或是功能）。舉例來說，我們可以把一個微波爐看成一個物件，那麼微波爐的顏色（Color）就是一個性質，容量（Volume）又是另一種性質，而我們可以把「加熱」（Heat）看成微波爐的一個方法（或是函數）它的輸入參數有兩個，第一個參數是放進微波爐的物品，第二個參數則是加熱的秒數。因此對於一個容量為八公升的白色微波爐 A，A.color 就是 white，A.volume 就是 8，而 A.heat("冷水", 30) 傳回值可能是 "溫水"（冷水加熱 30 秒變成溫水），而 A.heat("冷水", 300) 傳回值可能是 "沸水"（冷水加熱 300 秒變成沸水）。因此在上述範例中，document 就是一個 JavaScript 的物件，代表此網頁所在的文件，而 write() 就是一個方法，可以將輸入的字串寫到文件內。

document 物件還有一個與列印相關的方法：writeln()，它和 write() 的最大差別在於 writeln() 在列印完畢後會換列，但 write() 不會。例如如果連續呼叫 document.write("Good") 和 document.write("Bye!")，在網頁會呈現連在一起的 "GoodBye!"，但是如果連續呼叫 document.writeln("Good") 和 document.writeln("Bye!")，則在網頁會呈現中間有空格的 "Good Bye!"，這是因為 "Good" 和 "Bye!" 事實上是寫在不同的兩列上，在網頁排版後所呈現的效果，就會形成由空格分開的兩個英文字。範例如下：

Example（writeln01.htm）：

上述範例的原始檔如下：

原始檔（writeln01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>document.write() 和 document.writeln() 的差別</h2>
<hr>
使用 document.write():
<script>document.write("Good"); document.write("Bye!");</script>
<br>
使用 document.writeln():
<script>document.writeln("Good"); document.writeln("Bye!");</script>

<hr>
</body>
</html>

由上述範例也可以看出，JavaScript 是自由格式（Free Format）的，每一列程式碼可以塞下好幾個敘述，只要每一個敘述都有加上一個分號來表示敘述的結尾。

若要呈現 JavaScript 印出的原始效果，而不希望看到網頁排版之後的效果，可以 <pre> 和 </pre> 將 JavaScript 的程式碼前後包夾，例如：

Example（writeln02.htm）：

上述範例的原始檔如下：

原始檔（writeln02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>呈現 JavaScript 印出的原始效果</h2>
<hr>

<pre>
使用 document.write():
<script>document.write("Good"); document.write("Bye!");</script>
使用 document.writeln():
<script>document.writeln("Good"); document.writeln("Bye!");</script>
使用 document.write() 再加上 "\n":
<script>document.write("Good\n"); document.write("Bye!\n");</script>
</pre>

<hr>
</body>
</html>

Hint
為縮減篇幅，後續的程式碼列表，將不再顯示標準的 HTML 網頁檔頭與檔尾，而以「...」來取代。

由上述範例可知，document.write("...\n") 和 document.writeln("...") 得到的效果是一樣的，其中 "\n" 代表換列符號，類似的符號可以整理如下：

特殊字元說明
\n換列符號（New Line）
\t定位符號（Tab）
\r歸位符號（Carriage Return）：將游標移到目前列的第一個位置，印出的文字將會蓋過之前的文字
\\插入一個反斜線（\）
\"插入一個雙引號（"）
\'插入一個單引號（'）

Hint
使用 <pre> 和 </pre> 來包夾 JavaScript 的程式碼，可以得JavaScript 的原始輸出結果（未經瀏覽器排版）， 非常適用於JavaScript 程式碼的偵錯。

下面這個例子，會在瀏覽器呈現 5 個由小變大的 "Hello World!"：

Example（hello02.htm）：

上述範例的原始檔如下：

原始檔（hello02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>利用 JavaScript 來印出 size 由 1 到 5 的"Hello World!"</h2>
<hr>

<script>
// 由 for 迴圈來產生 5 個由小變大的  "Hello World!"
for (i=1; i<=5; i++)
	document.writeln("<font size=" + i + ">Hello World!</font><br>");
</script>

<hr>
</body>
</html>

在上例中，我們利用 JavaScript 的 for 迴圈來逐次更改字串的大小，因此瀏覽器上會顯示 5 個由小變大的 "Hello World!"。（有關於 for 迴圈，我們會在下一章仔細說明。）由以上範例我們可注意到下列事項：

我們前面提到，若要得到未經瀏覽器排版前的 JavaScript 輸出結果，可以使用 <pre> 和 </pre>，但是對於含有 HTML 標籤的文字資料，我們就必須改用 <xmp> 和 </xmp>，例如，若要印出前一個範例未經瀏覽器排版前的結果，可見下列範例：

Example（helloXmp01.htm）：

上述範例的原始檔如下：

原始檔（helloXmp01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>利用 &#60xmp&#62 和 &#60/xmp&#62 來印出未經瀏覽器排版的結果</h2>
<hr>

<script>
// 由 for 迴圈來產生 5 個由小變大的  "Hello World!"
document.write('<xmp>');
for (i=1; i<=5; i++)
	document.writeln("<font size=" + i + ">Hello World!</font><br>");
document.write('</xmp>');
</script>

<hr>
</body>
</html>

Hint
若將 <xmp> 及 </xmp> 寫成置於 <script>...</script> 之外的 HTML 標籤，你可以得到一樣的結果嗎？為什麼？請試看看！

換句話說，我們可以使用 <pre> 和 <xmp> 來觀察經由 JavaScript 或瀏覽器解譯之後的資料，詳細流程可見此「example/HTML,JavaScript解譯及排版流程流程.ppt」。

Example（HTML,JavaScript解譯及排版流程流程.ppt）：

在過去 Web 瀏覽器群雄並起的時代，並不是每一種瀏覽器都能夠支援 JavaScript，因此我們就要想一種辦法來適時地隱藏 JavaScript 的程式碼，以避免不認得 JavaScript 的瀏覽器將 JavaScript 的原始碼呈現在網頁上。其方法就是混合使用 HTML 及 JavaScript 的註解，例如：

<script language=javascript> <!-- JavaScript 程式碼 ... //--> </script>
但現在兩大瀏覽器都支援 JavaScript，所以使用這種「隱藏程式碼」的 JavaScript 的程式已經越來越少了。以本節第一個 "Hello World!" 的例子，若使用「隱藏程式碼」的方式來撰寫，得到的網頁呈現效果完全相同，其原始檔案如下：

原始檔（hello03.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>使用註解來隱藏程式碼，使不支援 JavaScript 的瀏覽器不會產生錯誤訊息</h2>
<hr>

<script language="javascript">
<!-- 如果瀏灠器無法辨識JavaScript程式, 則從下行開始隱藏
	str = "Hello World!";
	document.write(str);
// 隱藏至上行為止 -->
</script>

<hr>
<!--#include file="foot.inc"-->

JavaScript 程式設計與應用：用於網頁用戶端